<#include "/common/include.html"/>
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
    <@header title="代码预览">
    <#-- Theme style -->
        <link rel="stylesheet" href="${ctxStatic}/statics/css/AdminLTE.css?V=${config.getDvVersion()}">
        <style>
            body{
                font-size: 15px !important;
            }
            .nav-tabs-custom{margin-bottom:0 !important;box-shadow:none !important;border-radius:0 !important;}

            /* PrismJS 1.19.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+antlr4+apacheconf+apl+applescript+aql+arduino+arff+asciidoc+asm6502+aspnet+autohotkey+autoit+bash+basic+batch+bbcode+bison+bnf+brainfuck+brightscript+bro+c+csharp+cpp+cil+coffeescript+cmake+clojure+crystal+csp+css-extras+d+dart+diff+django+dns-zone-file+docker+ebnf+eiffel+ejs+elixir+elm+etlua+erb+erlang+fsharp+firestore-security-rules+flow+fortran+ftl+gcode+gdscript+gedcom+gherkin+git+glsl+gml+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jolie+jq+jsdoc+js-extras+js-templates+json+jsonp+json5+julia+keyman+kotlin+latex+latte+less+lilypond+liquid+lisp+livescript+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+nasm+neon+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+pascaligo+pcaxis+perl+php+phpdoc+php-extras+plsql+powershell+processing+prolog+properties+protobuf+pug+puppet+pure+python+q+qml+qore+r+jsx+tsx+renpy+reason+regex+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smalltalk+smarty+solidity+soy+sparql+splunk-spl+sqf+sql+stylus+swift+tap+tcl+textile+toml+tt2+turtle+twig+typescript+t4-cs+t4-vb+t4-templating+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+wasm+wiki+xeora+xojo+xquery+yaml+zig&plugins=line-highlight+line-numbers+show-invisibles+show-language+highlight-keywords+remove-initial-line-feed+normalize-whitespace+toolbar+copy-to-clipboard */
            /**
             * prism.js default theme for JavaScript, CSS and HTML
             * Based on dabblet (http://dabblet.com)
             * @author Lea Verou
             */
            code[class*="language-"],
            pre[class*="language-"] {
                color: black;
                background: none;
                text-shadow: 0 1px white;
                font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
                font-size: 13px;
                text-align: left;
                white-space: pre;
                word-spacing: normal;
                word-break: normal;
                word-wrap: normal;
                line-height: 1.5;

                -moz-tab-size: 4;
                -o-tab-size: 4;
                tab-size: 4;

                -webkit-hyphens: none;
                -moz-hyphens: none;
                -ms-hyphens: none;
                hyphens: none;
            }

            pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
            code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
                text-shadow: none;
                background: #b3d4fc;
            }

            pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
            code[class*="language-"]::selection, code[class*="language-"] ::selection {
                text-shadow: none;
                background: #b3d4fc;
            }

            @media print {
                code[class*="language-"],
                pre[class*="language-"] {
                    text-shadow: none;
                }
            }

            /* Code blocks */
            pre[class*="language-"] {
                padding: 1em;
                margin: .5em 0;
                overflow: auto;
            }

            :not(pre) > code[class*="language-"],
            pre[class*="language-"] {
                background: #f5f2f0;
            }

            /* Inline code */
            :not(pre) > code[class*="language-"] {
                padding: .1em;
                border-radius: .3em;
                white-space: normal;
            }

            .token.comment,
            .token.prolog,
            .token.doctype,
            .token.cdata {
                color: slategray;
            }

            .token.punctuation {
                color: #999;
            }

            .token.namespace {
                opacity: .7;
            }

            .token.property,
            .token.tag,
            .token.boolean,
            .token.number,
            .token.constant,
            .token.symbol,
            .token.deleted {
                color: #905;
            }

            .token.selector,
            .token.attr-name,
            .token.string,
            .token.char,
            .token.builtin,
            .token.inserted {
                color: #690;
            }

            .token.operator,
            .token.entity,
            .token.url,
            .language-css .token.string,
            .style .token.string {
                color: #9a6e3a;
                background: hsla(0, 0%, 100%, .5);
            }

            .token.atrule,
            .token.attr-value,
            .token.keyword {
                color: #07a;
            }

            .token.function,
            .token.class-name {
                color: #DD4A68;
            }

            .token.regex,
            .token.important,
            .token.variable {
                color: #e90;
            }

            .token.important,
            .token.bold {
                font-weight: bold;
            }
            .token.italic {
                font-style: italic;
            }

            .token.entity {
                cursor: help;
            }

            pre[data-line] {
                position: relative;
                padding: 1em 0 1em 3em;
            }

            .line-highlight {
                position: absolute;
                left: 0;
                right: 0;
                padding: inherit 0;
                margin-top: 1em; /* Same as .prism’s padding-top */

                background: hsla(24, 20%, 50%,.08);
                background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));

                pointer-events: none;

                line-height: inherit;
                white-space: pre;
            }

            .line-highlight:before,
            .line-highlight[data-end]:after {
                content: attr(data-start);
                position: absolute;
                top: .4em;
                left: .6em;
                min-width: 1em;
                padding: 0 .5em;
                background-color: hsla(24, 20%, 50%,.4);
                color: hsl(24, 20%, 95%);
                font: bold 65%/1.5 sans-serif;
                text-align: center;
                vertical-align: .3em;
                border-radius: 999px;
                text-shadow: none;
                box-shadow: 0 1px white;
            }

            .line-highlight[data-end]:after {
                content: attr(data-end);
                top: auto;
                bottom: .4em;
            }

            .line-numbers .line-highlight:before,
            .line-numbers .line-highlight:after {
                content: none;
            }

            pre[class*="language-"].line-numbers {
                position: relative;
                padding-left: 3.8em;
                counter-reset: linenumber;
            }

            pre[class*="language-"].line-numbers > code {
                position: relative;
                white-space: inherit;
            }

            .line-numbers .line-numbers-rows {
                position: absolute;
                pointer-events: none;
                top: 0;
                font-size: 100%;
                left: -3.8em;
                width: 3em; /* works for line-numbers below 1000 lines */
                letter-spacing: -1px;
                border-right: 1px solid #999;

                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;

            }

            .line-numbers-rows > span {
                pointer-events: none;
                display: block;
                counter-increment: linenumber;
            }

            .line-numbers-rows > span:before {
                content: counter(linenumber);
                color: #999;
                display: block;
                padding-right: 0.8em;
                text-align: right;
            }

            .token.tab:not(:empty),
            .token.cr,
            .token.lf,
            .token.space {
                position: relative;
            }

            .token.tab:not(:empty):before,
            .token.cr:before,
            .token.lf:before,
            .token.space:before {
                color: #808080;
                opacity: 0.6;
                position: absolute;
            }

            .token.tab:not(:empty):before {
                content: '\21E5';
            }

            .token.cr:before {
                content: '\240D';
            }

            .token.crlf:before {
                content: '\240D\240A';
            }
            .token.lf:before {
                content: '\240A';
            }

            .token.space:before {
                content: '\00B7';
            }

            div.code-toolbar {
                position: relative;
            }

            div.code-toolbar > .toolbar {
                position: absolute;
                top: .3em;
                right: .2em;
                transition: opacity 0.3s ease-in-out;
                opacity: 0;
            }

            div.code-toolbar:hover > .toolbar {
                opacity: 1;
            }

            /* Separate line b/c rules are thrown out if selector is invalid.
               IE11 and old Edge versions don't support :focus-within. */
            div.code-toolbar:focus-within > .toolbar {
                opacity: 1;
            }

            div.code-toolbar > .toolbar .toolbar-item {
                display: inline-block;
            }

            div.code-toolbar > .toolbar a {
                cursor: pointer;
            }

            div.code-toolbar > .toolbar button {
                background: none;
                border: 0;
                color: inherit;
                font: inherit;
                line-height: normal;
                overflow: visible;
                padding: 0;
                -webkit-user-select: none; /* for button */
                -moz-user-select: none;
                -ms-user-select: none;
            }

            div.code-toolbar > .toolbar a,
            div.code-toolbar > .toolbar button,
            div.code-toolbar > .toolbar span {
                color: #bbb;
                font-size: .8em;
                padding: 0 .5em;
                background: #f5f2f0;
                background: rgba(224, 224, 224, 0.2);
                box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
                border-radius: .5em;
            }

            div.code-toolbar > .toolbar a:hover,
            div.code-toolbar > .toolbar a:focus,
            div.code-toolbar > .toolbar button:hover,
            div.code-toolbar > .toolbar button:focus,
            div.code-toolbar > .toolbar span:hover,
            div.code-toolbar > .toolbar span:focus {
                color: inherit;
                text-decoration: none;
            }

        </style>
    </@header>
<body class="hold-transition box box-main sidebar-mini ${config.getKey('SYS_INDEX_SKINNAME','skin-blue')}">
    <div class="wrapper">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <#list gen_code?keys as cdoeKey>
                    <#if cdoeKey_index == 0>
                        <li class="active"><a href="#tab_1_${cdoeKey_index}" data-toggle="tab">${cdoeKey}</a></li>
                    <#else>
                        <li><a  href="#tab_1_${cdoeKey_index}" data-toggle="tab">${cdoeKey}</a></li>
                    </#if>
                </#list>
            </ul>
            <div class="tab-content">
                <#list gen_code?keys as cdoeKey>
                    <#if cdoeKey_index == 0>
                        <div class="tab-pane active" id="tab_1_${cdoeKey_index}">
                             <pre class="line-numbers">
                                 <code id="code_${cdoeKey_index}" class="language-${cdoeKey[(cdoeKey?index_of(".")+1)..]}">
<#--                                    ${gen_code["${cdoeKey}"]}-->
                                 </code>
                             </pre>
                        </div>
                    <#else>
                        <div class="tab-pane" id="tab_1_${cdoeKey_index}">
                             <pre class="line-numbers">
                                 <code id="code_${cdoeKey_index}" class="language-${cdoeKey[(cdoeKey?index_of(".")+1)..]}">
<#--                                    ${gen_code["${cdoeKey}"]}-->
                                 </code>
                             </pre>
                        </div>
                    </#if>
                </#list>
            </div>

            <#list gen_code?keys as cdoeKey>
                    <textarea id="text_${cdoeKey_index}" style="display: none;" >${gen_code["${cdoeKey}"]?replace(">","[#]")}</textarea>
            </#list>
        </div>
    </div>
    <@footer>
    <@jsLibs.prism_js/>
        <script>

            function onLoadSuccess() {
                opt.modal.msg("数据正在加载...请稍后");
            }

            <#list gen_code?keys as cdoeKey>
                var temp_${cdoeKey_index} = $('#text_${cdoeKey_index}').html().replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\[#\]/g, ">");
                $('#code_${cdoeKey_index}').html(temp_${cdoeKey_index});
            </#list>


        </script>



    </@footer>
</@pageTheme>